
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    TouchableOpacity,
    Dimensions,
    ScrollView,
    InteractionManager
} from 'react-native';
import Global from "../Commom/GlobalConst";
import Search from '../Components/Search';
import CarouselPager from 'react-native-carousel-pager';
import RuralAPIService from "../Commom/RuralAPIService";
let {width,height} = Global.Const.size;
import CarouselCard from 'react-native-card-carousel'
export default class SelectAddress extends Component {
    constructor(props) {
        super(props);
        this.state = {
            ruralData:[]
        }
    }
    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            RuralAPIService.CityList('').then((ret)=> {
                this.setState({
                    ruralData:ret
                })
            }).catch((err)=> {
            });
        });
    }

    BackAction() {
        this.props.navigator.pop();
    }
    onSearch(string){
        RuralAPIService.CityList(string).then((ret)=> {
            this.setState({
                ruralData:ret
            })
        }).catch((err)=> {
        });
    }
    BackAction() {
        this.props.navigator.pop();
    }
    selectAddress(city,cityId){
      this.props.address(city,cityId);
      this.props.navigator.pop();
    }
    wanjian(){
        return(
            <CarouselPager initialPage={0}>
                {this.state.ruralData.map((item, index) => {
                    return(
                        <TouchableOpacity key={index} activeOpacity={0.5}
                                          onPress={()=>this.selectAddress(item.name,item.id)}>
                            <View key={index} style={{width:width-60,height:height-120,alignItems:'center',borderRadius:5,backgroundColor:'white',marginTop:15}}>
                                <Image style={{width:width-60,height:height-180,position: 'absolute',left:0,top:0,resizeMode:'cover',borderTopLeftRadius:5,borderTopRightRadius:5}} source={{uri: item.image}}/>
                                <Text style={{color:'white',marginTop:80,fontSize:30,backgroundColor:'rgba(0,0,0,0)'}}>{item.name}</Text>
                                <View style={{width:width-60,height:40,flexDirection:'row',justifyContent:'center',position: 'absolute',left:0,bottom:100}}>
                                    <Image style={{width:15,height:15,resizeMode:'contain',marginRight:8}}
                                           source={require('../../Image/new/icon_weather.png')}/>
                                    <Text style={{color:'white',backgroundColor:'rgba(0,0,0,0)'}}>{item.temperature} ℃</Text>
                                </View>
                                <View style={{flexDirection:'row',position: 'absolute',left:0,bottom:0,width:width-60,height:60}}>
                                    <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                                        <Image style={{width:15,height:15,resizeMode:'contain',marginBottom:3}}
                                               source={require('../../Image/new/icon_wind.png')}/>
                                        <Text>{item.wind}</Text>
                                    </View>
                                    <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                                        <Image style={{width:15,height:15,resizeMode:'contain',marginBottom:3}}
                                               source={require('../../Image/new/icon_temperature.png')}/>
                                        <Text>{item.moisture}%</Text>
                                    </View>
                                    <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                                        <Image style={{width:15,height:15,resizeMode:'contain',marginBottom:3}}
                                               source={require('../../Image/new/icon_small_wind.png')}/>
                                        <Text>{item.level}级</Text>
                                    </View>
                                </View>
                            </View>
                        </TouchableOpacity>
                    )
                })}
            </CarouselPager>
        );
    }
    render() {
        return (
            <View style={styles.container}>
                {/*导航栏*/}
                <View style={{flexDirection:'row',width,height:64,paddingTop:24,backgroundColor:'#24CD78',alignItems:'center'}}>
                    <TouchableOpacity activeOpacity={0.5}
                                      onPress={()=>this.BackAction()}>
                        <Image style={{width:16,height:16,marginLeft:10,marginRight:10,resizeMode:'contain'}}
                               source={require('../../Image/back_icon_white.png')}
                        />
                    </TouchableOpacity>
                    <View style={{ width:width-35,height:40,backgroundColor: 'white',}}>
                        <Search
                            ref="search_box"
                            backgroundColor={'#24CD78'}
                            contentWidth={width-36}
                            middleWidth={(width-36)/2}
                            positionRightDelete={55}
                            cancelButtonWidth={50}
                            placeholder={'城市搜索'}
                            cancelTitle={'取消'}
                            onSearch={(string)=>this.onSearch(string)}
                        />
                    </View>
                </View>
                {/*推荐小镇*/}
                {this.state.ruralData.length>0?
                    <View style={{width,height:height-90,marginTop:10}}>
                        {this.state.ruralData.length>1?
                            <CarouselCard
                                height={height-90}
                                width={width-50}
                                one={0.85}
                                two={0.88}
                                data={this.state.ruralData}
                                onPress={item => {this.selectAddress(item.name,item.id)}}
                                contentRender={item => <View style={{width:width-55,height:height-90,overflow:'hidden',alignItems:'center',backgroundColor:'white',borderRadius:5}}>
                                    <Image style={{width:width-55,height:height-150,position: 'absolute',left:0,top:0,resizeMode:'cover',borderTopLeftRadius:5,borderTopRightRadius:5}} source={{uri: item.image}}/>
                                    <Text style={{color:'white',marginTop:80,fontSize:30,backgroundColor:'rgba(0,0,0,0)'}}>{item.name}</Text>
                                    <View style={{width:width-55,height:40,flexDirection:'row',justifyContent:'center',position: 'absolute',left:0,bottom:100}}>
                                        <Image style={{width:15,height:15,resizeMode:'contain',marginRight:8}}
                                               source={require('../../Image/new/icon_weather.png')}/>
                                        <Text style={{color:'white',backgroundColor:'rgba(0,0,0,0)'}}>{item.temperature} ℃</Text>
                                    </View>
                                    <View style={{flexDirection:'row',position: 'absolute',left:0,bottom:0,width:width-55,height:60}}>
                                        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                                            <Image style={{width:15,height:15,resizeMode:'contain',marginBottom:3}}
                                                   source={require('../../Image/new/icon_wind.png')}/>
                                            <Text>{item.wind}</Text>
                                        </View>
                                        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                                            <Image style={{width:15,height:15,resizeMode:'contain',marginBottom:3}}
                                                   source={require('../../Image/new/icon_temperature.png')}/>
                                            <Text>{item.moisture}%</Text>
                                        </View>
                                        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                                            <Image style={{width:15,height:15,resizeMode:'contain',marginBottom:3}}
                                                   source={require('../../Image/new/icon_small_wind.png')}/>
                                            <Text>{item.level}级</Text>
                                        </View>
                                    </View>
                                </View>}
                            />
                            :
                            <TouchableOpacity activeOpacity={0.5}
                                              onPress={()=>this.selectAddress(this.state.ruralData[0].name,this.state.ruralData[0].id)}>
                                    <View style={{width,height:height-90,overflow:'hidden',alignItems:'center',justifyContent:'center'}}>
                                    <View style={{width:width-55,height:height-90,alignItems:'center',backgroundColor:'white',borderRadius:5}}>
                                        <Image style={{width:width-55,height:height-150,position: 'absolute',left:0,top:0,resizeMode:'cover',borderTopLeftRadius:5,borderTopRightRadius:5}} source={{uri: this.state.ruralData[0].image}}/>
                                        <Text style={{color:'white',marginTop:80,fontSize:30,backgroundColor:'rgba(0,0,0,0)'}}>{this.state.ruralData[0].name}</Text>
                                        <View style={{width:width-55,height:40,flexDirection:'row',justifyContent:'center',position: 'absolute',left:0,bottom:100}}>
                                            <Image style={{width:15,height:15,resizeMode:'contain',marginRight:8}}
                                                   source={require('../../Image/new/icon_weather.png')}/>
                                            <Text style={{color:'white',backgroundColor:'rgba(0,0,0,0)'}}>{this.state.ruralData[0].temperature} ℃</Text>
                                        </View>
                                        <View style={{flexDirection:'row',position: 'absolute',left:0,bottom:0,width:width-55,height:60}}>
                                            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                                                <Image style={{width:15,height:15,resizeMode:'contain',marginBottom:3}}
                                                       source={require('../../Image/new/icon_wind.png')}/>
                                                <Text>{this.state.ruralData[0].wind}</Text>
                                            </View>
                                            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                                                <Image style={{width:15,height:15,resizeMode:'contain',marginBottom:3}}
                                                       source={require('../../Image/new/icon_temperature.png')}/>
                                                <Text>{this.state.ruralData[0].moisture}%</Text>
                                            </View>
                                            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                                                <Image style={{width:15,height:15,resizeMode:'contain',marginBottom:3}}
                                                       source={require('../../Image/new/icon_small_wind.png')}/>
                                                <Text>{this.state.ruralData[0].level}级</Text>
                                            </View>
                                        </View>
                                    </View>
                                </View>
                            </TouchableOpacity>}
                    </View>
                    :null}
             </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:  Global.Const.transparent,
    },
});